<template>
  <el-container>
    <el-main>
      <el-row type="flex" class="row-bg" justify="center">
        <el-col :span="20" align="left">
          <a-list item-layout="vertical" size="large" :pagination="pagination" :data-source="histories">
            <div slot="header"><b>浏览历史</b></div>
            <a-list-item slot="renderItem" key="item.title" slot-scope="item, index">
              <img
                slot="extra"
                width="272"
                alt="logo"
                :src=item.cover
              />
              <a-list-item-meta>
                <nuxt-link slot="title" :to="item.urlPath">
                  <h4>{{ item.title }}</h4>
                </nuxt-link>
              </a-list-item-meta>
              <a-tag color="blue">
                {{ item.tag }}
              </a-tag>
              <br><br>
              <a-icon type="clock-circle" theme="twoTone"/>

              {{ momentFormat(item.createTime) }}
            </a-list-item>
          </a-list>
        </el-col>
      </el-row>
    </el-main>
  </el-container>

</template>

<script>
import historyApi from "@/api/history";
import moment from 'moment'

moment.locale('zh-cn')
export default {
  asyncData({params, error}) {
    return {
      memberId: params.id,
    };
  },
  data() {
    return {
      histories: [],
      pagination: {
        onChange: (page) => {
          console.log(page);
        },
        pageSize: 5,
      },
    };
  },
  created() {
    this.initResult();
  },
  methods: {
    initResult() {
      historyApi.getAllHistory(this.memberId).then(response => {
        this.histories = response.data.data.list
      })
    },
    momentFormat(dateStr) {
      return moment(new Date(dateStr)).startOf('millisecond').fromNow()
    }
  },
}
</script>

<style scoped>


.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-row {
  margin-bottom: 20px;

&
:last-child {
  margin-bottom: 0;
}

}
.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
